<link rel="stylesheet" href="./demo.css">

<div class="box enlarge1">
  <div class="img">
    <div class="mask"></div>
  </div>
  <ul>
    <li class="active" imgName="1">
      <img src="./imgs/1.small.jpg" alt="">
    </li>
    <li imgName="2">
      <img src="./imgs/2.small.jpg" alt="">
    </li>
  </ul>
  <div class="enlarge"></div>
</div>

<br><br>
<hr>
<br><br>

<div class="box enlarge2">
  <div class="img">
    <div class="mask"></div>
  </div>
  <ul>
    <li class="active" imgName="1">
      <img src="./imgs/1.small.jpg" alt="">
    </li>
    <li imgName="2">
      <img src="./imgs/2.small.jpg" alt="">
    </li>
  </ul>
  <div class="enlarge"></div>
</div>

<script src="./demo.js"></script>
<script>
  let enlarge1 = new Enlarge('.enlarge1')
  let enlarge2 = new Enlarge('.enlarge2')
// let enlarge3 = new Enlarge('.enlarge3')
</script>